$("header").load("1.head.html")
$("footer").load("2.bottom.html")



// <!-- 产品介绍 -->

$(".zhengpingfd").mouseover(function(){
$(".zhengpingfd span").css({
  background :"url(../images/62.jpg.jpg)",
});
}).mouseout(function(){
$(".zhengpingfd span").css({
    background :"url(../images/62-1.jpg.jpg)"
})
})


$(".baoyoufd").mouseover(function(){
$(".baoyoufd span").css({
  background :"url(../images/63.jpj.jpg)"
  
});
}).mouseout(function(){
$(".baoyoufd span").css({
  background :"url(../images/63-1.jpj.jpg)"
})
})

$(".shohofd").mouseover(function(){
$(".shohofd span").css({
  background :"url(../images/95.png)"
  
});
}).mouseout(function(){
$(".shohofd span").css({
  background :"url(../images/95-1.png)"
})
})



$("#small-box").mousemove(function(){
    $(".imgintroduce").css({
        display:"none"
    });
}).mouseout(function(){
    $(".imgintroduce").css({
        display:"block"
    })
})

   
// 购物车

  // 减号
  function funJian(){
    if($('#valueNum').val() == 1){
        $('#valueNum').val(1)
    } else {
        $('#valueNum').val($('#valueNum').val()-1)
    }
}
// 加号
function funAdd() {
    $('#valueNum').val(parseInt($('#valueNum').val())+1)
}
// 加入购物车返回此数值
let btn=document.querySelector(".gocart")
window.onload =function(){
    // console.log(12345678);
    localStorage.setItem("num",$('#valueNum').val());
    localStorage.setItem("price",$('#price').html());
}




class Mg{
    constructor(smallBox, mask, bigBox,selects){
        this.selects = selects;
        this.smallBox = smallBox;
        this.mask = mask;
        this.bigBox = bigBox;
    }

    mouseover(){
        let that = this
        this.smallBox.onmouseover = function(){
            that.mask.style.display = "block";
            that.bigBox.style.display = "block";
        }
    }

    mouseout(){
        let that = this;
        this.smallBox.onmouseout = function(){
            that.mask.style.display = "none";
            that.bigBox.style.display = "none";
        }
    }


    mousemove() {
        let that = this;
        this.smallBox.onmousemove = function(evt){
            let e = evt || event;

            let left = e.pageX - that.mask.offsetWidth/2 - this.offsetLeft;
            let top = e.pageY - that.mask.offsetHeight/2 - this.offsetTop;


            if (left < 0) {
            left = 0;
        }

        let maxLeft = this.offsetWidth - that.mask.offsetWidth;

        if (left > maxLeft) {
            left = maxLeft;
        }

        if (top < 0) {
            top = 0;
        }

        let maxTop = this.offsetHeight - that.mask.offsetHeight;

        if (top > maxTop) {
            top = maxTop;
        }


            let x = left * that.bigBox.offsetWidth / that.mask.offsetWidth;
            let y = top * that.bigBox.offsetHeight / that.mask.offsetHeight;

            that.mask.style.left = left+"px";
            that.mask.style.top = top  + "px";
            that.bigBox.style.backgroundPositionX = -x + "px"
            that.bigBox.style.backgroundPositionY = -y + "px"

        }

       
    }
    
    click() {
        let that = this;
        for (let i = 0; i < selects.length; i++) {
            selects[i].onclick = function () {
                for (let j = 0; j < selects.length; j++) {
                    if (i == j) {
                        selects[j].className = "newStyle";
                        that.smallBox.style.backgroundImage = `url(img/${j}.jpg)`;
                        that.bigBox.style.backgroundImage = `url(img/${j}.jpg)`;
                    } else {
                        selects[j].className = "";
                    }
                }
            }   
        }
    }  
 
    eventBind(){
        this.click();
        this.mouseover();
        this.mouseout();
        this.mousemove();
    }
}

let oSmallBox = document.querySelector("#small-box");
let oMask = document.querySelector("#mask");
let oBigBox = document.querySelector("#big-box");

let selects = document.querySelectorAll(".selects img")

let mg = new Mg(oSmallBox, oMask, oBigBox,selects)
    mg.eventBind()